{% extends "base_jrcadmin.html" %}

{% block leftmenu %}
	<ul>
		<li>Systems</li>
		<li>Parameter</li>
		<li>Combination Signal Time</li>
		<li>Portfolios</li>
	</ul>
{% endblock %}

{% block content %}

	<div style="width: 700px; float: left;">
	
		<div id="ParametersLoader" style="display: none;"><img src="http://sunnystars.eu/images/ajaxloading.gif" alt="Loading..." /></div>

		<table cellspacing="0">

			<thead>
			<tr>
			<th class="action-checkbox-column"></th><th>
			PK
			</th><th>
			<select id="SystemId" name="system_id" onchange="JrcLoadParameters(this.options[this.selectedIndex].value)">
				<option value="0">System</option>
				{% for item in systems %}
					<option value="{{ item.pk }}">{{ item.name }}</option>
				{% endfor %}
			</select>
			</th><th>
			<select name="asset_id" onchange="OnJrcAssetChanged(this.options[this.selectedIndex].value);">
				<option value="0">Asset class</option>
				{% for item in assets %}
					<option value="{{ item.pk }}">{{ item.name }}</option>
				{% endfor %}
			</select>
			</th><th>
				<div id="MarketsDiv">
					<select id="MarketId" name="market_id">
						<option value="0">Market</option>
						{% for item in markets %}
							<option value="{{ item.pk }}">{{ item.name }}</option>
						{% endfor %}
					</select>
				</div>

			</th><th>
			<select id="StatusId" name="status_id">
				<option value="0">Direction</option>
				{# for item in MyConstants.STATUS_CHOICES #}
					<option value="L">Long (buy)</option>
					<option value="S">Short (sell)</option>
					<option value="B">Both</option>
				{# endfor #}
			</select>
			</th><th>
			<select id="StatusId" name="status_id">
				<option value="0">Status id</option>
				{# for item in MyConstants.STATUS_CHOICES #}
					<option value="1">approved</option>
					<option value="2">deleted</option>
				{# endfor #}
			</select>
			</th><th>
			<a href="?ot=asc&amp;o=7">
			Day begin
			</a></th><th>
			<a href="?ot=asc&amp;o=8">
			Day end
			</a></th>
			</tr>
			</thead>





		<tbody id="ParametersTbody">
		</tbody>

    </table>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script type="text/javascript">

	var gIsOperationLoaded = true;

	window.onload = function () {
        // Loading initial parameters
        JrcLoadParameters(0);
    };

	function JrcLoadParameters()
	{
		if( gIsOperationLoaded )
		{
			gIsOperationLoaded = false;
			jQuery("#ParametersLoader").show();
			
			var systemId = jQuery("#SystemId").val();
			var marketId = jQuery("#MarketId").val();
			console.debug("System ID to load: " + systemId);
			console.debug("Market ID to load: " + marketId);
			
			jQuery.ajax({
				url: "/test/1/getparameterbypage"
				, data: "system_id=" + systemId + "&market_id=" + marketId
				, success: function(data){ OnJrcParametersLoaded(data); }
				, error: function(){ OnJrcParametersFailed(); }
			});
		}
	}

	function OnJrcParametersLoaded(data)
	{
		gIsOperationLoaded = true;
		jQuery("#ParametersLoader").hide();
		jQuery("#ParametersTbody").html(data);
	}

	function OnJrcParametersFailed()
	{
		gIsOperationLoaded = true;
		jQuery("#ParametersLoader").hide();
		jQuery("#ParametersTbody").html("<tr><td colspan='8'>Error loading data!</td></tr>");
	}

	function OnJrcAssetChanged(value)
	{
		if( gIsOperationLoaded && (value > 0) )
		{
			gIsOperationLoaded = false;
			//jQuery("#MarketsDiv").html("<img src='http://sunnystars.eu/images/ajaxloading.gif' alt='Loading...' />");
			jQuery("#ParametersLoader").show();
			jQuery.ajax({
				url: "/test/" + value + "/getassetmarkets"
				, success: function(data){ OnJrcAssetMarketsCompleted(data); }
				, error: function(){ OnJrcAssetMarketsFailed(); }
			});
		}
	}

	function OnJrcAssetMarketsCompleted(data)
	{
		gIsOperationLoaded = true;
		jQuery("#ParametersLoader").hide();
		jQuery("#MarketsDiv").html(data);
	}

	function OnJrcAssetMarketsFailed(data)
	{
		gIsOperationLoaded = true;
		jQuery("#ParametersLoader").hide();
		jQuery("#MarketsDiv").html("<select name=\"market_id\"><option value=\"0\">----</option></select>");
	}

</script>



{% endblock %}
